<template>
  <el-dialog v-model:visible="dialog.visible" v-bind="dialog" @open="dialogOpen">
    <el-form v-bind="form">
      <el-form-item prop="parentId" label="上级:">
        <el-select ref="select" :value="selectLabel" class="aaa" placeholder="请选择">
          <el-option :value="form.model.parentId" style="height: unset">
            <el-tree
              :data="treeData"
              v-bind="tree"
              :default-expanded-keys="defaultExpandedKeys"
              @node-click="handleNodeClick"
            />
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="name" label="部门名称:">
        <el-input v-model="form.model.name" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button size="small" type="primary" @click="submit">确 认</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { internetApi } from '@/api/api'

export default {
  props: {
    treeData: {
      type: Array,
      default: () => []
    },
    treeList: {
      type: Array,
      default: () => []
    },
    update: Function
  },
  data() {
    return {
      //弹窗相关的属性
      dialog: {
        visible: false,
        title: '新建组织架构',
        width: '90%',
        closeOnClickModal: false
      },
      //form表单相关的参数
      form: {
        ref: 'form',
        model: {
          deptId: null,
          parentId: null,
          name: null,
          sort: null
        },
        labelWidth: '90px',
        size: 'small',
        rules: {
          parentId: [{ required: true, message: '上级不能为空', trigger: 'change' }],
          name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }]
        }
      },
      //el-tree相关的参数
      tree: {
        props: {
          children: 'children',
          label: 'name'
        },
        expandOnClickNode: false,
        nodeKey: 'id'
      },
      //select展示选中的上级名称
      selectLabel: ''
    }
  },
  computed: {
    defaultExpandedKeys() {
      return this.treeData.map((item) => item.id)
    }
  },

  methods: {
    handleNodeClick(data) {
      this.$refs.select.blur()
      this.selectLabel = data.name
      this.form.model.parentId = data.id
    },

    //确认按钮
    submit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          if (this.form.model.deptId) {
            await this.$request(internetApi.updateDeptInfo, this.form.model)
          } else {
            await this.$request(internetApi.createDeptInfo, this.form.model)
          }
          this.update()
          this.$message.success('操作成功')
          this.dialog.visible = false
        }
      })
    },
    open(type, row) {
      if (type === 'edit') {
        //编辑
        this.form.model.deptId = row.id
        this.form.model.name = row.name
        this.form.model.parentId = row.parentId
        this.form.model.sort = row.sort
        this.selectLabel = this.treeList.filter((item) => {
          return item.id === row.parentId
        })[0].name
        this.dialog.title = '编辑组织架构'
      } else {
        //新增
        this.form.model.deptId = null
        this.form.model.name = null
        this.form.model.parentId = row.id || null
        this.selectLabel = row.name || ''
        this.form.model.sort = null
        this.dialog.title = '新建组织架构'
      }
      this.dialog.visible = true
    },
    //弹窗打开时，清除所有校验
    dialogOpen() {
      //dialog是懒加载，所以要用$nextTick
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-select-dropdown__item {
  padding: 0;
  &.selected {
    font-weight: normal;
  }
}
.el-select {
  display: block;
}
.el-tree {
  padding-right: 10px;
}
.el-dialog__wrapper :deep(.el-dialog) {
  max-width: 500px;
}
</style>
